<template>
  <div class="ra-icon">
    <!-- 根据 icon 类型决定使用的不同类型的图标组件 -->
    <svg-icon
      v-if="icon && icon.startsWith('svg-')"
      :icon-class="icon.replace('svg-', '')"
    />
    <el-icon v-else-if="icon" class="sub-el-icon">
      <component :is="icon" />
    </el-icon>
    <svg-icon v-else icon-class="menu" />
  </div>
</template>

<script setup>
import SvgIcon from '@/components/common/SvgIcon/index.vue'; // 确保路径正确

const props = defineProps({
  icon: {
    type: String,
    default: null,
  },
});
</script>
<style scoped>
.ra-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sub-el-icon {
  width: 14px !important;
  margin-right: 0 !important;
  color: currentcolor;
}
</style>
